import React, { PureComponent } from 'react'
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { ListViewPage } from 'weaver-mobile-page';
import { renderLoading, renderNoData } from '../public';
import BackTop from '../../public/back-to-top';

@withRouter
@inject('communicationStore')
@observer
export default class DefalutJoiner extends PureComponent {
  constructor(props) {
    super(props)
    this.prefixCls = 'cowork-detail-defalutjoiner'
  }
  
  componentDidMount() {
    const { communicationStore: { defalutJoinerStore, detailStore }, location: { pathname }, isForm } = this.props;
    const { getListDatas, setStoreState } = defalutJoinerStore;
    const { addInfoForm: { formParams }, itemsVO } = detailStore; 
    let typeid = isForm ? (formParams && formParams.typeId) : itemsVO.typeid
    typeid = typeid || ''
    const params = { typeid, sharetype: 'typedefshare' }
    // Path
    setStoreState({path: pathname})
    // list 数据请求
    getListDatas(params, pathname)
  }

  getTemplate = () => {
    const newTemp = {
      default: [{
        key: 'col_1',
        configs: [
          { key: 'col1_row1', configs: [{ key: 'sharetypespan',style: { display: 'inline' } }] },
          { key: 'col1_row2', configs: [{ key: 'sharetype2span', style: { display: 'inline' }}] },
          { key: 'col1_row3', configs: [{ key: 'sharetype3span' ,style: { display: 'inline' }}] },
        ]
      }]
    }
    return newTemp
  }
  
  render() {
    const { communicationStore: { defalutJoinerStore } } = this.props;
    const { defalutJoinerList, listLoading } = defalutJoinerStore;
    if (listLoading) return renderLoading;
    if (defalutJoinerList && !defalutJoinerList.data.length) return renderNoData
    return (
      <div className={this.prefixCls}>
        <BackTop
          visibilityHeight='200'
          modal
          target={`${this.prefixCls}-list`}
        >
          <ListViewPage.Normal
            className={`${this.prefixCls}-list`}
            store={defalutJoinerList}
            getTemplate={this.getTemplate}
            customHeight='100%'
          />
        </BackTop>
      </div>
    )
  }
}
